### Rozdział 37. Połącz stronę docelową z front‑endem strony głównej – jak zespolić lejki i „witrynę” w jedno doświadczenie (dla aplikacji pisanych na zamówienie)

W projektach szytych na miarę często powstają dwa równoległe „światy”: front‑end strony głównej (marketingowa warstwa witryny, często w Next.js/Nuxt/SPA) oraz dedykowane strony docelowe (landing pages) budowane pod kampanie, testy A/B czy konkretne persony. Jeśli pozostaną rozdzielone, użytkownik czuje pęknięcie: inne menu, inny język, inne style, brak możliwości powrotu do oferty – i konwersje przeciekają. Celem jest jedno, spójne doświadczenie: niezależnie od tego, skąd użytkownik przyszedł i dokąd pójdzie później, ma czuć, że jest „u Ciebie”, a jego ścieżka do działania jest krótka i przewidywalna.

Poniżej opisuję, jak praktycznie połączyć landing z front‑endem strony głównej w aplikacji tworzonej na zamówienie: od warstwy wizualnej i komponentów, przez nawigację i routing, po analitykę, testy i mobile. To nie jest tylko kwestia linków – to projekt procesu użytkownika.

#### Zacznij od modelu ścieżek: gdzie użytkownik startuje i gdzie ma skończyć
Najpierw narysuj mapę ścieżek w dwóch wymiarach: skąd wchodzą (reklama, SEO, social, e‑mail) i jaki jest cel (zapis, demo, zakup, kontakt). Dla każdego źródła odpowiedz:

- Co użytkownik zobaczy jako pierwszy ekran? Landing dopasowany do obietnicy reklamy czy „uniwersalny” hero strony głównej?
- Czy landing ma być „samowystarczalny” (z minimalną nawigacją), czy „otwarty” (z pełnym menu)?
- Jaki jest następny krok po konwersji mikro (np. obejrzeniu demo)? Czy wracamy na stronę główną, czy idziemy do on‑boardingu?

Ta mapa to fundament. Pozwala zdecydować, które elementy front‑endu wciągnąć na landing, a gdzie lepiej utrzymać skupienie i ograniczyć rozpraszacze.

#### Spójność wizualna: jeden system designu, niezależnie od URL‑a
Najczęstszy błąd? Landing budowany jak osobna mini‑strona z innym gridem, kolorami i typografią. W aplikacjach customowych tego nie trzeba – masz komponenty, które możesz współdzielić.

- Wspólny Design System: ta sama siatka, tokeny (kolory, spacing, typografia), komponenty UI. Landing korzysta z tych samych „klocków” co front‑end: przyciski, karty, moduły opinii, formularze.
- Logo, header i footer: wersje „kompaktowe” na landingu, ale styl i treść te same (np. to samo logo, ten sam język w stopce, te same linki prawne).
- Język i mikrocopy: te same słowa kluczowe w CTA („Umów demo”, nie „Zapisz się” raz, a „Skontaktuj się” innym razem). Spójność językowa buduje zaufanie.

Jeśli landing wymaga lżejszej kompozycji, zastosuj „tryb skupienia”: uproszczone menu i krótsza stopka, ale bez zmiany tożsamości.

#### Nawigacja: ile „świata” pokazać na landingu
To decyzja o poziomie rozproszeń i zaufania.

- „Tryb kampanii” (minimalny): ukryj rozwijane menu, zostaw logo (link do strony głównej), link do cennika i kontaktu oraz politykę prywatności w stopce. Użyj anchorów w obrębie landingu (Sekcja: Funkcje, Opinie, FAQ). Ten tryb skupia uwagę na konwersji.
- „Tryb przeglądania” (pełny): pełny header z głównymi sekcjami witryny. Stosuj go, gdy kampania ma charakter informacyjny lub produkt jest złożony i naturalnie wymaga eksploracji.

Kluczowe: zawsze daj „wyjście bezpieczeństwa” do strony głównej jednym kliknięciem (logo) i zapewnij stałe CTA w sticky headerze na mobile.

#### Routing i domeny: subdomena czy ścieżka
Techniczne osadzenie wpływa na SEO, analitykę i cache.

- Ścieżka w obrębie domeny (np. /promo/…) zapewnia wspólną analitykę, dzieli cookies (np. logowanie), ułatwia linkowanie wewnętrzne i przynosi korzyści SEO.
- Subdomena (promo.twojadomena.pl) daje separację techniczną (testy, release), ale wymaga osobnych ustawień SEO i analityki. Wybieraj, gdy landing ma osobny lifecycle lub serwujesz go innym frameworkiem.

W aplikacjach SPA/SSR skonfiguruj dynamiczne routy (Next.js/Nuxt) dla szablonów landingów i serwuj je z tej samej aplikacji, by odziedziczyć komponenty i middleware (np. i18n, auth gdzie potrzeba).

#### Dane i identyfikacja: spójne tagowanie i źródła
Gdy łączysz światy, zadbaj o ciągłość danych:

- UTM i referrery: kampanie prowadzą na landing ze spójnymi UTM‑ami (source/medium/campaign). Po kliknięciu CTA do strony głównej zachowuj parametry (dopisz `?utm_…` do linków lub przenoś przez `sessionStorage`).
- Jedna warstwa analityczna: wspólny tag manager, spójne eventy (naming convention). Przykład: `lp_view`, `lp_cta_click`, `lp_form_submit`, a na front‑endzie: `nav_cta_click`, `demo_start`, `signup_complete`.
- Lead tracking: formularze z landingu zapisują do tego samego CRM/ESP, z tagiem źródła („lp-exit-intent”, „lp-hero-cta”). Dzięki temu porównasz jakość leadów z landingu i ze strony głównej.

Bez tej spójności nie wiesz, co tak naprawdę działa – a to zabija sens testów.

#### Ścieżka użytkownika: krótsza na landingu, konsekwentna po przejściu
Na landingu minimalizuj liczbę kroków do konwersji (1–2 ekrany). Gdy użytkownik przechodzi na stronę główną:

- Zachowaj kontekst: jeśli kliknął „Zobacz plan Pro”, przewiń/otwórz sekcję cennika z planem Pro zaznaczonym. Jeśli kliknął „Integracje”, wyląduj na konkretnej integracji z anchor linkiem.
- Konsekwencja CTA: nazwy i kolory przycisków takie same; jeśli na landingu jest „Umów demo”, nie zmieniaj tego na „Wypróbuj za darmo” bez wyjaśnienia.
- Mikrokroki i dowody: moduły opinii, liczniki, zaufane logotypy – te same komponenty, tylko inne ułożenie. Użytkownik powinien „rozpoznać” to, co już widział.

To buduje poczucie ciągłości – nie zaczyna „od nowa”.

#### Formularze i integracje: jeden system, różne warianty
Nie duplikuj logiki – używaj tych samych komponentów formularzy (walidacja, stany błędów, dostępność), tylko w wariantach:

- Wariant „szybki” na landingu: mniej pól (e‑mail + imię + opcjonalny telefon), krótkie copy, prosty zgody RODO.
- Wariant „rozszerzony” na stronie głównej: dodatkowe pola segmentacyjne (wielkość firmy, branża), jeśli to pomoże lepiej obsłużyć lead.

Oba trafiają do jednego pipeline’u (CRM, ESP), ale z innym tagiem źródła. Autorespondery powinny rozpoznawać kontekst („Dzięki za zapis z przewodnika X” vs. „Dzięki za kontakt z sekcji Oferta”).

#### SEO i wydajność: landing nie może niszczyć Core Web Vitals
- Te same optymalizacje zasobów: krytyczne CSS inline, lazy load dla obrazów, WebP/AVIF, odroczone skrypty.
- Unikaj intruzywnych modali na wejściu (szczególnie na mobile) – Google tego nie lubi. Jeśli musisz, użyj slide‑in po scrollu lub exit‑intent.
- Spójne metadane: tytuł i opis landingu oraz odpowiadającej mu sekcji na stronie głównej powinny mówić jednym głosem – unikniesz kanibalizacji. Rozważ `rel=canonical`, jeśli to wariant tej samej treści.

W aplikacjach SSR ustaw prerender dla popularnych landingów, by mieć dobry LCP.

#### Mobile‑first: dwa kciuki, jedna ścieżka
Na telefonie 70–80% ruchu zobaczy najpierw landing. Dlatego:

- Sticky CTA w headerze (niewielki pasek, zawsze widoczny).
- Menu „zredukowane” do jednego poziomu – żadnych wielopiętrowych megamenus.
- Formularze „na jeden ekran”: duże cele dotykowe, klawiatury numeryczne tam, gdzie trzeba, pamięć stanu po błędzie.
- Przejścia płynne: unikaj przenoszenia użytkownika między subdomenami (ryzyko utraty parametrów i sesji).

Jeśli landing ma wideo – dostarczaj lżejszą wersję lub obraz zastępczy z „play” (lazy).

#### Testy i eksperymenty: jeden eksperyment na raz
- A/B na landingu: testuj hero (nagłówek + grafika), dowód (opinie vs. liczby) lub ofertę (demo vs. trial). Nie mieszaj kilku naraz.
- A/B na przejściu: testuj „CTA bezpośredni” (formularz na landingu) vs. „CTA po przejściu” (formularz na stronie głównej). Mierz pełną ścieżkę do leadu, nie tylko CTR.
- Częstotliwość i zasady: eksperyment trwa do osiągnięcia istotności, ale minimum 7–14 dni, by złapać cykle tygodniowe.

Wnioski dokumentuj – te same reguły przeniesiesz na kolejne landingi.

#### Bezpieczeństwo i zgodność: te same zasady w obu światach
- RODO/GDPR: identyczne wzory zgód, polityki i baner cookie (jedna konfiguracja, wspólny CMP).
- Dostępność: nagłówki w kolejności, focus trap w modalach, aria‑label dla przycisku zamknięcia, kontrasty zgodne z WCAG.
- Treści prawne: linki w stopce landingu i front‑endu prowadzą do tych samych dokumentów.

Użytkownik nie powinien mieć wrażenia, że „landing to osobny byt bez reguł”.

#### Przykładowa ścieżka wdrożenia (operacyjnie)
1) Audyt różnic: porównaj header, footer, CTA, formularze, styl i copy między landingiem a front‑endem. Spisz rozjazdy.
2) Ujednolicenie komponentów: wyciągnij do wspólnej biblioteki Button, Form, Testimonial, Pricing, FAQ. Podłącz do obu środowisk.
3) Ustal „tryby” headera: pełny i kampanijny. Skonfiguruj per‑route.
4) Zmapuj linki: CTA z landingu prowadzą do konkretnych anchorów/sekcji front‑endu, z zachowaniem UTM.
5) Ujednolić analitykę: wspólny GTM, te same eventy. Zaimplementuj przekazywanie `utm_*`/`gclid` między stronami.
6) Testy E2E: mobilne i desktop, ścieżki od reklamy do „dziękuję za kontakt”. Sprawdź utrzymanie parametrów i stany błędów.
7) Publikacja i monitoring: Core Web Vitals, konwersje, mapy ciepła. Po 7 dniach pierwsza iteracja.

To ma być proces, nie jednorazowa akcja.

#### Najczęstsze błędy i krótkie naprawy
- Inne CTA i słownictwo na landingu i stronie głównej → ujednolić mikrocopy i kolory przycisków.
- Zgubione UTM przy przejściu → dopisz parametry do linków lub przenoś przez `sessionStorage`.
- Dwa różne formularze i różne zgody → jeden komponent, różne warianty pól.
- Landing na subdomenie bez wspólnych stylów → skonsoliduj design tokens i ładuj tę samą bazę CSS.
- Pełnoekranowe popupy na mobile na wejściu → wyłącz lub zamień na slide‑in po scrollu.

Każda z tych poprawek natychmiast podnosi odczuwaną spójność i często – konwersję.

### Podsumowanie rozdziału

Połączenie strony docelowej z front‑endem strony głównej to nie „dodanie linku w menu”. To zestrojenie całego doświadczenia: wspólny design system, świadome decyzje o nawigacji, konsekwentne CTA, ciągłość danych i lekki, mobilny przebieg ścieżki użytkownika. Gdy landing i strona główna mówią jednym głosem, użytkownik nie traci zaufania i energii na orientację – może całą poświęcić na decyzję. W customowych aplikacjach masz przewagę: kontrolujesz komponenty, routing i analitykę. Wykorzystaj to, by zbudować jeden, spójny ekosystem – dzięki temu kampanie nie będą „doklejką”, tylko naturalnym przedłużeniem Twojej marki i procesu sprzedaży.